<template>
  <div class="box">
    <div class="logo">饿了么</div>
    <div>
      <span class="iconfont icon-sousuo"></span>
      <input type="text" placeholder="输入商家、商品名称">
    </div>
  </div>

</template>

<script>
export default {
  name: 'App'

}
</script>


<style scoped>
.box {
  height: 100px;
  width: 100%;
  background-color: #009bff;
  box-sizing: border-box;
  padding: 10px 20px;
}

.box .logo {
  font-size: 27px;
  color: #ffffff;
  margin-bottom: 10px;
}

.box div:nth-child(2) {
  position: relative;
}

.box div:nth-child(2) span {
  font-size: 16px;
  color: grey;
  position: absolute;
  left: 100px;
  bottom:10px;
}

.box input {
  width: 100%;
  outline: none;
  border: none;
  background-color: #f5fbff;
  text-align: center;
  line-height: 35px;
  border-radius: 18px;
}
</style>
